<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Time</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    
    html,
    body {
      width: 100%;
      height: 100%;
    }

    body {
      background-image: url(./bg.jpg);
      background-repeat: no-repeat;
      background-size: cover;
    }

    #app {
      padding-top: 70px;
      padding-left: 70px;
      color: #fff;
      font-family: Timeis,'Arial Black','Arial-BoldMT','Arial Bold',Arial,Helvetica,sans-serif;
      opacity: 0.8;
    }

    #time {
      font-size: 160px;
    }

    #date {
      font-size: 40px;
      padding-left: 20px;
    }
  </style>
</head>

<body>

  <div id="app">
    <div id="time"></div>
    <div id="date"></div>
  </div>

  <script>
    const timeNode = document.getElementById('time')
    const dateNode = document.getElementById('date')
    setInterval(() => {
      const time = new Date()
      const Y = time.getFullYear()
      const M = time.getMonth()+1
      const D = time.getDate()
      const h = time.getHours()
      const m = time.getMinutes()
      const s = time.getSeconds()
      const week = getWeek(time.getDay())
      timeNode.innerText = `${h}:${m < 10 ? '0' : ''}${m}:${s < 10 ? '0' : ''}${s}`
      dateNode.innerText = `${Y}-${M < 10 ? '0' : ''}${M}-${D < 10 ? '0' : ''}${D} ${week}`
    }, 1000)

    function getWeek(w){
      switch(w) {
        case 0: return '星期天';
        case 1: return '星期一';
        case 2: return '星期二';
        case 3: return '星期三';
        case 4: return '星期四';
        case 5: return '星期五';
        case 6: return '星期六';
        default: return ''
      }
    }

    document.body.onclick = ()=>{
        document.body.requestFullscreen();
    }
  </script>
</body>

</html>